<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
  <head>
      <meta charset="UTF-8">
      <title>事件处理</title>
  </head>
  <body>

  <div id="app">
    <h1>{{message}}</h1>
    <!--
      1.v-on:click 表示给button绑定一个click事件，使用vue对象处理
      2.sayHi() 表示要绑定的方法，即vue实例的methods属性中定义的方法
      3.底层仍然是dom处理
      4.如果方法不需要传递参数，可以省略小括号
      5.v-on指令可以简写成@，需要浏览器支持
    -->
    <button v-on:click="sayHi()">点击输出</button>
    <button v-on:click="sayOk()">点击输出</button>
    <button v-on:click="sayHi">点击输出</button>
    <button @click="sayOk">点击输出</button>
  </div>

  <script src="vue.js"></script>
  <script type="text/javascript">
    let vm = new Vue({
      el:"#app",
      data:{
        message:"Vue事件处理的案例",
        name:"lmy"
      },
      //methods 对应的值是一个对象{}，可以理解成方法池
      methods:{
        sayHi() {
          console.log("hi, 银角大王");
        },
        sayOk() {
          console.log("hi, 金角大王");
        }
      }
    })
  </script>
  </body>
</html>